<template>
    <div class="clearfix choose">
      <div class="banner">
        <carrousel></carrousel>
      </div>
      <div class="select-program-wrap">
        <div class="select-program">
          <div v-for="(item, index) in programs" @click="selectProgram(item.modelId, item.instructionId)" class="program-item">
            <div class="icon" :style='"background-image: url(./static/images/"+ icons[type-1][index] +");"' style="-webkit-background-size: 100%;background-size: 100%;">
            </div>
            <div class="text">
              <p>{{ item.instructionName }}</p>
              <p>&yen;{{ item.price}}</p>
            </div>
          </div>
        </div>
        <div class="bg" :class="type === '1' ? 'xyj' : 'hgj'"></div>
      </div>
    </div>
</template>
<script>
  let agencyId = '';
  import * as api from 'api';
  export default {
    data () {
      return {
        openId: '',
        sn: 'xxxx0001',
        type: '1',
        icons: [
          ['x-1.gif', 'x-2.gif', 'x-3.gif'],
          ['hgj-p1.gif', 'hgj-p2.gif', 'hgj-p3.gif']
        ],
        programs: []
      }
    },

    created () {
      let params = this.$route.params.params.split('&');
      this.openId = params[0];
      this.sn = params[1];
      this.type = params[2];
      this.queryDirective();
    },

    methods: {
      // 查询指令
      queryDirective () {
        api.queryDirective({
          sn: this.sn
        })
          .then(res => {
            let data = res.resultData;
            this.programs = data[0].venderInstructionList;
            agencyId = data[0].agencyId;
          })
      },

      selectProgram (modelId, instructionId) {
//        weui.
        const that = this;
        api.pay({
          openId: this.openId,
          modelId: modelId,
          instructionId: instructionId
        })
          .then(res => {
            res = JSON.parse(res.resultData);
            wx.ready(function () {
              wx.chooseWXPay({
                'appId': res.appId,
                'timestamp': res.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                'nonceStr': res.nonceStr, // 支付签名随机串，不长于 32 位
                'package': res.packageString, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                'signType': 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                'paySign': res.paySign, // 支付签名
                success: function(res) {
                  console.log(res);
                  that.$router.push({ path: '/initiateing?deviceSN=' + that.sn + '&type=' + that.type + '&agencyId=' + agencyId })
                  if (res.errMsg == 'chooseWXPay:ok') {
                    // 支付成功
                    that.Toast('支付成功');
                  } else {
                    that.Toast(res.errMsg);
                  }
                },
                cancel: function(res) {
                  // 支付取消
                  this.Toast('支付取消');
                }
              });
            })
          })
          .catch(() => {
            alert('服务器错误');
          })
      }
    },

    components: {
      carrousel: require('@/components/carrousel')
    }
  }
</script>
<style lang="scss" scoped="">
  @import '../../styles/user/choose';
</style>
